<template>
	<div>
		<van-checkbox-group v-model="result" @change="selGoods">
			<van-row v-for="(item,index) in $store.state.cartList" :key="index">
				<van-swipe-cell>
					<van-col span="2">
						<van-checkbox :name="item"></van-checkbox>
					</van-col>
					<van-col span="22">
						<van-card :price="item.goods.salePrice" :title="item.goods.productName"
						 :thumb="item.goods.productImage" @dblclick="del(item,index)">
							<template #num>
								<van-stepper v-model="item.num" @change="numChange" />
							</template>
						</van-card>
					</van-col>
					<template #right>
						<van-button square text="删除" type="danger" style="height:100px" @click="del(item,index)" />
					</template>
				</van-swipe-cell>
			</van-row>
		</van-checkbox-group>
		
		<van-submit-bar :price="total" button-text="提交订单">
			<van-checkbox v-model="checkAll" :disabled="$store.state.cartList.length <= 0" @click="selAll">全选</van-checkbox>
		</van-submit-bar>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				showList : this.$store.state.cartList,
				result : [],
				total : 0,
				checkAll : false
			}
		},
		methods:{
			selGoods() { 
				this.checkAll = this.result.length == this.$store.state.cartList.length
				this.computTotal()
			},
			computTotal() { 
				this.total = 0
				this.result.map(item => {
					this.total += item.goods.salePrice * item.num * 100
				})
			},
			numChange() { 
				this.computTotal();
			},
			selAll() { 
				if (this.checkAll) {
					this.result = this.$store.state.cartList;
				} else {
					this.result = [];
				}
			},
			del(item, index) {
				let i = this.result.indexOf(item);
					this.$store.commit('cartDel', index)
					this.checkAll = this.result.length == this.$store.state.cartList.length
					this.computTotal();
			}
		}
	}
</script>

<style scoped>
	
</style>
